<template>
  <div>
    <div class="page">

      <el-descriptions title="组信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
        <el-descriptions-item label="客户组号">{{ groupInfo.groupCode }}</el-descriptions-item>
        <el-descriptions-item label="组名称">{{ groupInfo.groupName }}</el-descriptions-item>
        <el-descriptions-item label="组类型">{{ formatColumnMap(groupTypeMap, 'value', groupInfo.groupType, 'desc') }}</el-descriptions-item>
        <el-descriptions-item label="关联客户数">{{ groupInfo.relationCount }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ groupInfo.createTime ? parseTime(groupInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ groupInfo.contact }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ groupInfo.contactPhone }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ groupInfo.remark }}</el-descriptions-item>
      </el-descriptions>
      <div class="table-title">客户信息</div>
      <lb-table
        ref="lbTable"
        v-loading="$loadingPlugin.fetchData"
        height="640px"
        border
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
        custom-column
        :immediate-fetch="false"
        @fetch="fetchData"
      />
    </div>

    <editCsmGroup ref="editCsmGroup" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
    <relevancyCsm ref="relevancyCsm" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
    <remark ref="remark" />
    <csm-detail ref="csmDetail" />
  </div>
</template>

<script>
  import { queryCsmGroupDetail, queryCsmGroupDetailList } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import editCsmGroup from './editCsmGroup.vue'
  import relevancyCsm from './relevancyCsm.vue'
  import remark from './Remark.vue'
  import CsmDetail from '../../../components/CsmDetailModal/index.vue'
  import store from '@/store'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      editCsmGroup, relevancyCsm, remark, CsmDetail
    },
    props: {
      temp: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        formatColumnMap,
        parseTime,
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' },
        csmStatusMap: [],
        groupTypeMap: [],
        customerTypeMap: [],
        subTypeAllList: [],
        groupInfo: {},
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105,
              render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称'
            },
            {
              prop: 'sfzh',
              width: 200,
              label: '身份证号'
            },
            {
              prop: 'csmStatus',
              label: '客户状态',
              render: (h, { row }) => <span>{ row.csmStatus && formatColumnMap(this.csmStatusMap, 'value', row.csmStatus, 'desc') }</span>
            },
            {
              prop: 'cardNo',
              label: '营业执照'
            },
            {
              prop: 'csmType',
              label: '客户类型',
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.customerTypeMap, 'value', row.csmType, 'desc') }</span>
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              showOverflowTooltip: true,
              label: '所属机构'
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              label: '联系电话'
            },
            {
              prop: 'csmRgAddress',
              width: 200,
              showOverflowTooltip: true,
              label: '地址'
            //   render: (h, { row }) => <span >
            //   <span class='point-span' onClick={() => this.getMap(row)}>{this.$permission(8) && <i class='el-icon-location linkColor' style='cursor: pointer;'/>}</span>{ row.csmRgAddress }
            // </span>
            },
            {
              prop: 'createTime',
              label: '开户日期',
              showOverflowTooltip: true,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'menusArr'
      ])
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      async getDetail(val) {
        const res = await queryCsmGroupDetail({ groupCode: this.temp.groupCode })
        if (res.data) {
          this.groupInfo = res.data
        }
        console.log(val)
        this.csmStatusMap = val.csmStatusMap
        this.groupTypeMap = val.groupTypeMap
        this.customerTypeMap = val.customerTypeMap
        this.subTypeAllList = val.subTypeAllList
        this.fetchData({ currentPage: 1, pageSize: 20 })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          groupCode: this.temp.groupCode,
          isGroup: 1,
          currentPage,
          pageSize
        }
        const res = await queryCsmGroupDetailList(query)
        this.tableData.data = res.data.rows
        this.tableData.total = res.data.total
        console.log(this.tableData.data)
      },
      // 打开客户详情弹窗
      async openCsmDetail(row) {
        await this.$refs.csmDetail.open(row, true)
      },
      // 编辑
      async update(row) {
        await this.$refs.editCsmGroup.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
        this.getDetail()
      },
      // 关联客户
      async relevancyCsm(row) {
        await this.$refs.relevancyCsm.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
        this.getDetail()
      },
      // 备注
      async remark(row) {
        await this.$refs.remark.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
        this.getDetail()
      },
      // 获取权限
      getPermission(scope) {
        // 超级管理员返回所有用户权限
        if (store.getters.userInfo && store.getters.userInfo.expand1 === '1') return true
        const csmRouter = this.menusArr.find(item => item.menuId === 201)
        if (!csmRouter.btnScope) return true
        const btnScopes = [csmRouter.btnScope]
        return btnScopes.some(btnScope => btnScope >> (scope - 1) & 0x01)
      }
    }
  }
</script>

<style lang='scss' scoped>
.page {
  height: calc(100vh - 55px);
  padding: 0;
  overflow-y: auto;

  /deep/ .el-descriptions__title {
    color: #38BDBD;
  }
  .table-title {
    padding-bottom: 10px;
    font-weight: 600;
    color: #38BDBD;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 75%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 10px;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
</style>
